<template>
  <div class="mr-root">

    <nav-header>
      <p class="manhua">快看漫画</p>
    </nav-header>
    <back-top></back-top>
    <!--星期-->
    <loading v-if="showLoading"></loading>
    <div class="time" @click="change">
      <span @click="Monday" class="active">星期一</span>
      <span @click="Tuesday">星期二</span>
      <span @click="Wednesday">星期三</span>
      <span @click="Thursday">星期四</span>
      <span @click="Friday">星期五</span>
      <span @click="Saturday ">星期六</span>
      <span @click="Sunday">星期天</span>
    </div>


    <!-- 内容渲染-->
    <main class="xianshi">
      <div class="show">
        <div class="new">每天更新</div>
        <div v-for="f in List" class="show-big">
          <h3 class="show-one">{{f.title}}</h3>
          <img :src=f.cover_image_url class="img">
          <span>{{f.user.nickname}}</span>
          <span class="show-two">浏览量{{f.likes}}</span>
          <span class="show-four">{{f.update_status|number}}</span>
          <div class="jianjie">
            <b>剧情简介：</b> {{f.description}}
          </div>
        </div>
        <!--分页-->
        <div class="loading">
          <span @click="reduce"><<</span>
          <span @click="Monday">1</span>
          <span @click="Thursday">2</span>
          <span @click="Sunday">3</span>
          <span @click="Sunday">4</span>
          <span @click="Wednesday">5</span>
          <span @click="more">>></span>
        </div>
      </div>
    </main>
  </div>
</template>
<script>
  import NavHeader from '../commpoents/NavHeader'
  import BackTop from '../commpoents/BackTop'
  import Category from '../pages/Category'
  import Loading from '../commpoents/Loading'

  export default {
    components: {
      NavHeader,
      BackTop,
      Category,
      Loading,
    },

    data() {
      return {
        List: [],
        num: 1,
        showLoading: true
      }
    },

    created() {
      this.message(this.num)

    },

    methods: {
      message(number) {
        this.axios.get('http://www.kuaikanmanhua.com/web/tags/0?count=20&page=' + number)
          .then(data => {
            this.List = data.data.data.topics
             setTimeout(() => {
                   this.showLoading = false
            }, 17)
          })
          .catch(err => {
            console.log(err)
          })
      },
      //  星期更换请求
      Monday() {
        this.num = 1
        this.message(this.num)
      },
      Tuesday() {
        this.num = 2
        this.message(this.num)
      },
      Wednesday() {
        this.num = 3
        this.message(this.num)
      },
      Thursday() {
        this.num = 4
        this.message(this.num)
      },
      Friday() {
        this.num = 5
        this.message(this.num)
      },
      Saturday() {
        this.num = 6
        this.message(this.num)
      },
      Sunday() {
        this.num = 7
        this.message(this.num)
      },
      // 点击加或者减
      reduce() {
        this.num--
          if (this.num <1) {
            this.$alert('亲请不要在往前点了，你现在已经是在最前面了，请往后面一小步', '快看漫画', {
              confirmButtonText: '确定',
            });
            this.message(1)
          }
        else {
          this.message(this.num)
        }

      },
      
     more() {
        this.num++
          this.message(this.num)
        if (this.num > 5) {
           this.$alert('亲请不要在往后点了你现在是在最后面的位置，请往前一小步', '快看漫画', {
            confirmButtonText: '确定',
          });
        }
      },

      change() {
        $('.time span').click(function () {
          $(this).addClass('active').siblings().removeClass('active')
        })
      }
    }

  }

</script>
<style scoped>
  .mr-root {
    overflow: hidden;
  }
  
  .new {
    border-left: solid 8px #fadf3f;
    font-size: 0.7rem;
    padding-left: 5px;
  }
  
  .manhua {
    line-height: 2.5rem;
    font-size: 0.8rem;
  }
  
  .show {
    width: 90%;
    height: auto;
    margin-bottom: 4rem;
    position: relative;
    top: 50px;
    left: 5%;
  }
  
  .img {
    width: 100%;
    height: 70%;
  }
  
  .show-big {
    margin-bottom: 0.8rem;
  }
  
  .show-two {
    width: 50%;
  }
  
  .show-one {
    font-size: 0.5rem;
    color: salmon;
  }
  
  .time {
    width: 100%;
    position: fixed;
    top: 1.7rem;
    z-index: 110;
    color: salmon;
    display: flex;
  }
  
  .time span {
    font-size: 0.4rem;
    display: inline-block;
    width: 13.4%;
    height: 40px;
    text-align: center;
    font-weight: 100;
    line-height: 39px;
  }
  
  .active {
    color: white;
  }
  
  .jianjie {
    width: 100%;
    height: 30%;
  }
  
  .xianshi {
    margin-top: 2.2rem;
    margin-bottom: 2rem;
  }
  
  .show-four {
    display: inline-block;
    color: red;
    font-size: 0.4rem;
  }
  
  .loading {
    height: 1rem;
    text-align: center;
    line-height: 1rem;
    margin-top: 1rem;
    color: red;
    position: relative;
  }
  
  .loading span {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: solid 1px black;
  }
  
  .clear {
    font-weight: bolder;
  }
</style>